<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/购物车.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2837357_s8u3n2x8ame.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/promise封装ajax.js"></script>
</head>

<body>
    <div class="page">
        <div class="site-nav">
            <div class="site-nav-bd">
                <ul class="site-nav-bd-1">

                    <li class="menu">
                        <!-- <div> -->
                        <a href="../html/login.html">亲,请登录</a>
                        <a href="./register.html">免费注册</a>

                        <!-- </div> -->
                    </li>
                    <li class="menu-mobile"> <a href="#">手机逛淘宝</a> </li>
                </ul>
                <ul class="site-nav-bd-2">

                    <li class="menu-my-taobao">
                        <div class="menu-taobao">
                            <a href="#">我的淘宝</a>
                            <span class="iconfont icon-xiangxia"></span>
                        </div>

                        <div class="menu-bd-panel">
                            <a href="#">已买到的宝贝</a>
                            <a href="#">我的足迹</a>
                            <a href="#">爱逛街 </a>
                            <a href="#">淘宝达人</a>
                            <a href="#">新欢</a>
                        </div>

                    </li>
                    <li><span class="iconfont icon-gouwuche"></span><a href="#">购物车</a> <span class="iconfont icon-xiangxia"></span></li>
                    <li class="menu-sc"><span class="iconfont icon-collection"></span><a href="#">收藏夹</a> <span class="iconfont icon-xiangxia"></span>
                        <div class="menu-bd-panel">
                            <a href="#">收藏的宝贝</a>
                            <a href="">收藏的店铺</a>

                        </div>
                    </li>
                    <li class="menu-home">
                        <div class="menu-hd"><a href="taobao.html" class="h">免费开店</a></div>
                    </li>
                    <li>商品分类</li>
                    <li>|</li>
                    <li class="menu-m"><a href="">卖家中心</a> <span class="iconfont icon-xiangxia"></span>
                        <div class="menu-bd-panel">
                            <a href="#">免费开店</a>
                            <a href="">已卖出的宝</a>
                            <a href="">未卖出的宝</a>

                        </div>
                    </li>
                    <li class="menu-l"><a href="">联系客服</a> <span class="iconfont icon-xiangxia"></span>
                        <div class="menu-bd-panel">
                            <a href="#">消费者客户</a>
                            <a href="">卖家客服</a>

                        </div>
                    </li>
                    <li class="daohanglan"><a href="">网址导航</a> <span class="iconfont icon-xiangxia"></span>
                        <div class="daohang">
                            <div class="daoone">
                                <h3>主题市场</h3>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>

                            </div>
                            <div class="daoone">
                                <h3>主题市场</h3>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>


                            </div>
                            <div class="daoone">
                                <h3>主题市场</h3>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>


                            </div>
                            <div class="daoone">
                                <h3>主题市场</h3>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>
                                <ul>
                                    <li>女装</li>
                                    <li>男装</li>
                                    <li>内衣</li>
                                    <li>鞋子</li>
                                </ul>


                            </div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        <div class="content">
            <div class="header">
                <h1 class="iconfont icon-taobao"></h1>
                <span>购物车</span>
            </div>
            <div class="j_cat">
                <div class="cat1">
                    <ul class="catul">
                        <li>全部商品</li>
                        <li>降价商品</li>
                        <li>库存紧张</li>
                    </ul>
                    <div class="catsum">
                        <span class="nbs" style="cursor: pointer">全删 </span>
                        <span class="cattext">
                      已选商品
                      <span class="numbers">0</span>
                        <span>件</span>
                        </span>
                        <span>
                      ￥<span class="money">0.00</span>
                        </span>
                        <button>结算</button>
                    </div>
                </div>
                <div class="cart-table-th">
                    <div class="cartcheck">
                        <span class="check">
                            <input type="checkbox" class="quan"> <span>全选</span>

                        </span>
                        <span class="xinxi">
                              商品信息
                        </span>
                    </div>
                    <div class="prices">
                        <ul class="prul clear">
                            <li>单价</li>
                            <li>数量</li>
                            <li>金额</li>
                            <li>操作</li>
                        </ul>
                    </div>
                </div>


                <div class="orderlist clear">
                    <!-- <div class="cart_list">
                        <input type="checkbox" class="checks">
                        <div class="cart_sp"><img src="//img11.360buyimg.com/n1/jfs/t1/171516/21/19797/261656/607da267E3b5680e7/841215ff3f3fa7a9.jpg"><span class="cart_spname">安其罗夏季麻将凉席沙发垫夏沙发坐垫套经典款竹凉席垫冰垫座椅垫子组合沙发防滑坐垫子定做贵妃 碳化咖(双牛筋) 45*45cm坐垫</span></div>
                        <div class="cart_dj">￥10.00</div>
                        <div class="cart_sl">
                            <div class="down">-</div><input class="buynum" value="1">
                            <div class="add">+</div>
                        </div>
                        <div class="cart_xj">￥10</div>
                        <div class="del" data-id="23">删除</div>
                    </div>
                    <div class="cart_list">
                        <input type="checkbox" class="checks">
                        <div class="cart_sp"><img src="//img11.360buyimg.com/n1/jfs/t1/171516/21/19797/261656/607da267E3b5680e7/841215ff3f3fa7a9.jpg"><span class="cart_spname">安其罗夏季麻将凉席沙发垫夏沙发坐垫套经典款竹凉席垫冰垫座椅垫子组合沙发防滑坐垫子定做贵妃 碳化咖(双牛筋) 45*45cm坐垫</span></div>
                        <div class="cart_dj">￥10.00</div>
                        <div class="cart_sl">
                            <div class="down">-</div><input class="buynum" value="1">
                            <div class="add">+</div>
                        </div>
                        <div class="cart_xj">￥10</div>
                        <div class="del" data-id="23">删除</div>
                    </div> -->
                </div>
            </div>


        </div>
    </div>

</body>
<script>
    $(function() {

        var cookie = document.cookie;
        if (cookie) {
            var user = getCookie("lgc");
            if (user) {
                $(".menu").children().remove();
                $(".menu").append(` <a href="../html/login.html">${user}</a>
            <a class="selects">退出</a>`)
            }
        }

        $(".selects").click(function() {
            delCookie("lgc");
            location.href = 'taobao.html';


        })

        $(async function() {
            var result = await selectshopping({
                user
            });
            console.log(result);
            var {
                status,
                list
            } = result;
            if (status) {
                var html = "";
                list.forEach(({
                    id,
                    goodsId,
                    goodsName,
                    goodsPrice,
                    goodsImg,
                    buynum,
                    subtotal,
                    isChecked
                }) => {
                    html += ` 
                        <div class="cart_list" data-id="${id}">
                        <input type="checkbox" class="checks">
                        <div class="cart_sp"><img src="${goodsImg}"><span class="cart_spname">${goodsName}</span></div>
                        <div class="cart_dj">${goodsPrice}</div>
                        <div class="cart_sl">
                            <div class="down">-</div><input class="buynum" value="${buynum}">
                            <div class="add">+</div>
                        </div>
                        <div class="cart_xj">${subtotal}</div>
                        <div class="del">删除</div>
                    </div>
                `
                })
                $(".orderlist").html(html);
            }
            // 全选
            $(".quan").click(function() {
                    var checked = $(this).prop("checked");
                    $(".checks").prop("checked", checked);
                    subtotal()
                })
                //反选


            $(".checks").click(function() {
                if ($(".checks:checked").length == $(".checks").length && $(".checks").length > 0) {
                    $(".quan").prop("checked", true);
                } else {
                    $(".quan").prop("checked", false);
                }
                subtotal()
            })

            // 加减
            $(".add").click(async function() {
                var id = $(this).parents(".cart_list").attr("data-id");
                var result = await addGoods({
                    id
                });
                var {
                    status,
                    msg
                } = result;
                if (!status) throw msg;

                var num = $(this).prev().val();
                num++;
                $(this).prev().val(num);
                var price = $(this).parent().prev().text();
                price = price * num;
                $(this).parent().next().text(price);
                subtotal()
            })
            $(".down").click(async function() {
                var num = $(this).next().val();
                if (num == 1) {
                    return false;
                }
                num--;
                $(this).next().val(num);
                var price = $(this).parent().prev().text();
                price = price * num;
                $(this).parent().next().text(price);
                subtotal()
                var id = $(this).parents(".cart_list").attr("data-id");
                var result = await reduceGoods({
                    id
                });
                var {
                    status,
                    msg
                } = result;
                if (!status) throw msg;
            })
            $(".del").click(async function() {
                if (confirm('是否删除该商品')) {
                    var id = $(this).parents(".cart_list").attr("data-id");
                    var result = await delgoods({
                        ids: id
                    });
                    var {
                        status,
                        msg
                    } = result;
                    if (!status) throw msg;
                    $(this).parent().remove();
                    ischeckAll();
                    subtotal()
                }
            })


            $(".nbs").click(async function() {
                if ($(".checks").length > 0) {
                    if ($(".checks:checked").length > 0) {
                        if (confirm("是否删除该商品")) {
                            var list = $(".checks:checked").parents(".cart_list").map(function() {
                                return $(this).attr("data-id")
                            }).get();
                            console.log(list);
                            var result = await delgoods({
                                ids: list.join(",")
                            });
                            var {
                                status,
                                msg
                            } = result;
                            if (!status) throw msg;
                            $(".checks:checked").parent().remove();
                            ischeckAll();
                        }
                    } else {
                        alert("请至少选中一件商品");
                    }

                } else {
                    alert("购物车空空如也");
                }
                subtotal();
            })
            $(".buynum").blur(async function() {

                var id = $(this).parents(".cart_list").attr("data-id");
                var buynum = $(this).val();
                if (buynum >= 1) {
                    var result = await changeGoods({
                        id,
                        buynum
                    })
                    var {
                        status,
                        msg
                    } = result;
                    if (!status) throw msg;
                    var price = $(this).parent().prev().text();
                    $(this).parent().next().text(buynum * price);
                    subtotal();
                } else {
                    alert("请输入正确的件数");
                    // return false;
                }


            })


        })


        function subtotal() {
            var nums = 0;
            var sums = 0;
            $(".checks:checked").each(function() {
                var num = $(this).parent().find(".buynum").val();
                var sum = $(this).parent().find(".cart_xj").text();
                console.log(sum);
                sums += sum * 1;
                //  console.log(num);
                nums += num * 1;

            })

            //    console.log(nums);
            $(".numbers").text(nums);
            $(".money").text(sums.toFixed(2));
        }

        function ischeckAll() {
            if ($(".checks").length > 0) {
                var flag = $(".checks").is(":not(:checked)");
                $(".quan").prop("checked", !flag);
            } else {
                $(".quan").prop("checked", false);
            }

        }


    })
</script>

</html>